<template>
  <div class="banner">
    <div class="banner-title">
      <h3>管理驾驶舱</h3>
      <h5>老板的移动看板</h5>
      <h5>让经营数据尽收眼底</h5>
      <div><span @click="show = true">开始体验</span></div>
    </div>
    <img :src="imgUrl + 'jsc-banner.png'" alt="" />
  </div>
  <div class="part">
    <div class="part-title">
      <div>行业痛点</div>
      <p>您的企业，是否面临如下挑战？</p>
    </div>
    <ul>
      <li v-for="(el, i) in arrData" :key="i">
        <img :src="el.img" alt="" />
        <div>{{ el.title }}</div>
        <p v-for="(a, b) in el.text" :key="b">{{ a }}</p>
      </li>
    </ul>
    <div class="part-title">
      <div>核心功能</div>
      <p>
        为企业提供全方位的客户关系管理解决方案，实现业务增长和客户满意度的双重提升
      </p>
      <div class="bg-color">
        <img
          style="
            margin: auto;
            width: 1200px;
            height: 568px;
            display: block;
          "
          :src="`${imgUrl}jsc-hxgn.png`"
          alt=""
        />
      </div>
      
    </div>
  </div>
  <!-- <div
    class="part-problem"
    :style="`background: url(${imgUrl}jsc-hxgn.png) no-repeat center center; background-size: cover;`"
  ></div> -->
  <div class="part">
    <div class="part-title">
      <div>应用价值</div>
      <p>全面提升企业的客户管理能力、销售效率、营销效果、客户服务水平和团队协作效果，为企业创造更大的商业价值 </p>
    </div>
    <div class="yy-box-box">
      <div class="yy-box">
        <div class="yy-left">
          <p class="yy-title">
            决策层
          </p>
          <div class="yy-title1">
            全面掌控、降低风险
          </div>
          <div class="yy-mess">
            <p>通过完备的指标体系</p>
            <p>全面、直观地监测企业经营情况</p>
            <p>及时发现经营异常</p>
            <p>定位问题、协同解决，有效控制风险</p>
          </div>
        </div>
        <img
          style="
            width: 410px;
            height: 290px;
            display: block;
            margin: 0 55px 35px 55px;
          "
          :src="`${imgUrl}jsc-yyjz.png`"
          alt=""
        />
        <div class="yy-left">
          <p class="yy-title">
            执行层
          </p>
          <div class="yy-title1">
            精细、规范的图纸深化流程
          </div>
          <div class="yy-mess">
            <p>完善的多级图纸审核体系</p>
            <p>借助信息化系统审核</p>
            <p>不遗漏任何一处细节，确保图纸精细准确</p>
          </div>
        </div>
      </div>
      <div class="yy-left">
        <p class="yy-title">
            经营层
          </p>
          <div class="yy-title1">
            透视管理、及时纠偏
          </div>
          <div class="yy-mess">
            <p>通过各个业务线的任务指标计划和进度对照数据，帮助经营人员及时了解核心业绩指标达成情况 </p>
            <p>以便明确差距、及时调整，确保经营目标保质保量按期完成</p>
          </div>
        </div>
    </div>
  </div>
  <div class="part">
    <div class="part-title">
      <div>【管理驾驶舱】产品亮点</div>
      <p>全面提升企业的客户管理能力、销售效率、营销效果、客户服务水平和团队协作效果，为企业创造更大的商业价值</p>
    </div>
    <div class="cpld-main">
      <img
        style="
          width: 654px;
          height: 400px;
          display: block;
          margin: 0 55px  35px 55px;
        "
        :src="`${imgUrl}jsc-cpld1.png`"
        alt=""
      />
      <div class="cpld-box">
        <div class="cpld-title">
          <i class="iconfont icon-icon_kedianjijiantou"></i>
          <p>企业仪表盘</p>
        </div>
        <p>自定义企业经营目标及对应的KPI,全盘掌控企业经营</p>
        <p>状况和经营风险。</p>
      </div>
      <img
        style="
          width: 474px;
          height: 474px;
          display: block;
          position: absolute;
          right: 0;
          /* margin: 0 55px 35px 55px; */
        "
        :src="`${imgUrl}CRM-cpld-bb2.png`"
        alt=""
      />
    </div>
    <div class="cpld-main">
      <img
        style="
          width: 208px;
          height: 208px;
          display: block;
          position: absolute;
          left: 0;
          bottom: 30px;
          /* margin: 0 55px 35px 55px; */
        "
        :src="`${imgUrl}CRM-cpld-gk1.png`"
        alt=""
      />
      <div class="cpld-box mr-35">
        <div class="cpld-title">
          <i class="iconfont icon-icon_kedianjijiantou"></i>
          <p>专项分析</p>
        </div>
        <p>定制财务、生产、销售等专题分析，实现从业务 监控</p>
        <p>到底层数据的追溯、挖掘，支撑决策。</p>
      </div>
      <img
        style="
          width: 654px;
          height: 410px;
          display: block;
          margin: 0 0 35px 55px;
        "
        :src="`${imgUrl}jsc-cpld2.png`"
        alt=""
      />
    </div>
  </div>
  <div>
    <div class="part-title" style="margin-top: 60px">
      <div>管理驾驶舱四大特点</div>
      <p>全面提升客户管理能力、销售效率、数据分析水平、客户服务质量和团队协作效果，为企业创造更大的商业价值</p>
    </div>
    <four-advantages :advantageDate="advantageDate" :img="'jsc-line.png'"/>
  </div>
  <access-services-dialog
    v-model="show"
    @close="show = !show"
    @handleConfirm="handleConfirm"
  />
  <service-telephone-dialog v-model="show1" @close="show1 = !show1" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { arrData, brightSpotArray, advantageDate } from "./constants";
import AccessServicesDialog from "@/components/access-services-dialog/index.vue";
import ServiceTelephoneDialog from "@/components/service-telephone-dialog/index.vue";
import { imgUrl } from "@/utils/common";
import fourAdvantages from "../components/four-advantages.vue";

const pointData = ref(brightSpotArray[0].photosData);
/* 产品两点区域 */
const btn = ref(brightSpotArray[0].title);
const handleClickTab = (item) => {
  btn.value = item.title;
  pointData.value = item.photosData;
  console.log(item);
};
const show = ref(false);
const show1 = ref(false);
const handleConfirm = () => {
  show.value = false;
  show1.value = true;
};
</script>

<style scoped lang="scss">
.banner {
  position: relative;
  .banner-title {
    position: absolute;
    top: 47%;
    left: 25.3%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-align: left;
    h3 {
      font-size: 60px;
      line-height: 70px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    h5 {
      font-weight: 400;
      font-size: 36px;
      line-height: 50px;
      /* margin-bottom: 20px; */
    }
    p {
      display: inline-block;
      padding: 12px 16px;
      background: #809bc0;
      border-radius: 3px;
      font-size: 16px;
      line-height: 24px;
    }
    div {
      margin-top: 67px;
      span {
        cursor: pointer;
        display: inline-block;
        padding: 12px 50px;
        background-color: #fff;
        color: #1678ff;
        border-radius: 3px;
        font-weight: 400;
        font-size: 20px;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
/* .part {
      height: 717px;
    } */
.part-title {
  margin: 100px 0 40px 0;
}
ul {
  display: flex;
  /* width: calc(100% - 640px); */
  width: 66.7%;
  margin: 20px auto 100px;
  justify-content: space-around;

  li {
    /* width: 250px; */
    /* background-color: #ebecf0; */

    img {
      width: 65px;
      height: 65px;
      margin-bottom: 16px;
    }
    div {
      font-size: 20px;
      line-height: 30px;
    }
    p {
      font-weight: 400;
      font-size: 14px;
      color: #7a869a;
      line-height: 28px;
    }
  }
}
.part-problem {
  height: 667px;
}
.btn-tabs {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.sim-button {
  text-align: center;

  cursor: pointer;
  padding: 8px 24px;
  background-color: #f4f4f4;
  border-radius: 3px;
  /* color: rgba(255, 255, 255, 1); */
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
}
.button2 {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
}
.button2:hover {
  background-color: #1678ff;
  color: #fff;
}
.button2 > span {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.button2:hover > span {
  opacity: 0;
}
.button2::after {
  content: attr(data-text);
  width: 100%;
  height: 100%;
  position: absolute;
  left: -50px;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  color: #fff;
}
.button2:hover::after {
  left: 0;
  opacity: 1;
}
.sim-button__active {
  background-color: #1678ff;
  color: #fff;
}
/* 产品两点tip */
/* .banner-tip {
      position: absolute;
    } */
:deep(.el-carousel__container) {
  height: 702px;
}
:deep(.el-carousel__indicators--outside button) {
  /* background-color: var(--el-carousel-indicator-out-color); */
  opacity: 1;
  background: #ebecf0;
  width: 90px;
  height: 6px;
  border-radius: 4px;
}
:deep(.el-carousel__indicator.is-active button) {
  background-color: #1678ff;
}
.bg-color {
  background: #F2F8FF;
  padding: 60px 0;
  margin-top: 40px;
}
.yy-box-box {
  text-align: center;
}
.yy-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.yy-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  .yy-title {
    width: 150px;
    background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(186,215,255,0.47) 54%, rgba(255,255,255,0) 100%);
    border-radius: 30px 30px 30px 30px;
    font-size: 24px;
    color: #1678FF;
    margin-bottom: 15px;
  }
  .yy-title1 {
    font-size: 20px;
    color: #4E5969;
    line-height: 24px;
    margin-bottom: 8px;
  }
  .yy-mess {
    font-size: 16px;
    line-height: 24px;
    color: #7A869A;
  }
}
.cpld-main {
  display: flex;
  align-items: center;
  width: 1480px;
  margin: auto;
  position: relative;
}
.cpld-box {
  .cpld-title {
    display: flex;
    align-items: center;
    color: #1678FF;
    font-size: 26px;
    margin-bottom: 10px;
    i {
      margin-right:15px;
    }
  }
  p{
    color:#7A869A
  }
}
.mr-35 {
  margin-left: 135px;
}



</style>
